<!--
 * @Author: hq
 * @Date: 2022-05-28 19:29:52
 * @LastEditors: hq
 * @LastEditTime: 2022-07-22 13:20:02
 * @Description: 添加套餐
 * @version: 1.0
-->
<template>
  <div class="change">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane
        v-for="(item, index) in Tabs"
        :key="index"
        :label="item.title"
        :name="item.name"
      >
        <div v-if="index === 0">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="套餐名" prop="name">
                  <el-input
                    v-model="ruleForm.name"
                    placeholder="请输入套餐名"
                  ></el-input>
                </el-form-item>
                <el-form-item label="套餐首图" :required="true">
                  <el-upload
                    v-loading="loading"
                    class="avatar-uploader"
                    action=""
                    :show-file-list="false"
                    :http-request="upLoadServe"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="套餐轮播图">
                  <el-upload
                    v-loading="loading2"
                    action=""
                    list-type="picture-card"
                    :http-request="upLoadServe1"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :limit="10"
                  >
                    <div>
                      <i class="el-icon-plus"></i>
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="bannerImg" alt="" />
                  </el-dialog>
                </el-form-item>
                <el-form-item label="原价" prop="oprice">
                  <el-input
                    maxlength="10"
                    v-model="ruleForm.oprice"
                    placeholder="请输入原价"
                  ></el-input>
                </el-form-item>
                <el-form-item label="现价" prop="price">
                  <el-input
                    maxlength="10"
                    v-model="ruleForm.price"
                    placeholder="请输入现价"
                  ></el-input>
                </el-form-item>
                <el-form-item label="库存" prop="stock">
                  <el-input
                    maxlength="10"
                    v-model="ruleForm.stock"
                    placeholder="请输入库存"
                  ></el-input>
                </el-form-item>
                <el-form-item label="使用时间" :required="true">
                  <el-input
                    v-model="ruleForm.time"
                    placeholder="请输入使用时间"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态" :required="true">
                  <el-switch
                    active-text="禁用"
                    inactive-text="启用"
                    :active-value="1"
                    :inactive-value="0"
                    class="tablescope"
                    v-model="ruleForm.status"
                  >
                  </el-switch>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleNext"
                    >下一步</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div v-if="index === 1">
          <div class="pb20" v-for="(item, index) in groupArr" :key="index">
            <div class="taocan_group">
              <div class="ti">套餐组合名：</div>
              <el-input
                v-model="item.title"
                placeholder="请输入组合名"
              ></el-input>
              <el-button v-if="index === 0" @click="handleAddGroup">
                <i class="el-icon-plus"></i
              ></el-button>
              <div
                v-if="index != 0"
                class="del hand_cs"
                @click="handleDeleteGroup(index)"
              >
                <i class="el-icon-delete"></i>
              </div>
            </div>
            <div class="taocan">
              <div class="clo">
                <div>菜品：</div>
              </div>
              <div class="clo">
                <div>价格：</div>
              </div>
              <div class="clo">
                <div>数量：</div>
              </div>
            </div>
            <div class="taocan" v-for="(v, i) in item.list" :key="i">
              <div class="clo">
                <el-input placeholder="菜品名称" v-model="v.title"></el-input>
              </div>
              <div class="clo">
                <el-input
                  placeholder="菜品价格"
                  maxlength="8"
                  oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                  v-model="v.price"
                ></el-input>
              </div>
              <div class="clo">
                <el-input placeholder="菜品数量" v-model="v.num"></el-input>
              </div>
              <div
                v-if="i != 0"
                class="cz hand_cs"
                @click="handleDeleteGroup_sub(index, i)"
              >
                <i class="el-icon-delete"></i>
              </div>
              <el-button @click="handleAddGroup_sub(index, i)" v-if="i === 0">
                <i class="el-icon-plus"></i
              ></el-button>
            </div>
          </div>

          <div class="next">
            <el-button @click="handleBack">上一步</el-button>
            <el-button type="primary" @click="handleNext">下一步</el-button>
            <!-- <el-button type="primary" @click="handleSubmit">提交</el-button> -->
          </div>
        </div>
        <div v-if="index === 2" class="purchase">
          <el-button type="primary" @click="handleAddKnow">添加内容</el-button>
          <div
            class="purchase_con"
            v-for="(item, index) in use_know"
            :key="index"
          >
            <div class="l">
              <div class="flex">
                <div>标题：</div>
                <el-input v-model="item.title"></el-input>
              </div>
              <div class="flex">
                <div>内容：</div>
                <el-input v-model="item.value" type="textarea"></el-input>
              </div>
            </div>
            <i
              v-if="index != 0"
              @click="handleDelKnow(index)"
              class="el-icon-delete hand_cs"
            ></i>
          </div>
          <div class="next">
            <el-button @click="handleBack">上一步</el-button>

            <el-button type="primary" @click="handleSubmit">提交</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { editCombo, createCombo, comboDetail } from "@/api/shopSystem";
import upImg from "@/utils/upimg";
export default {
  props: ["rowData"],
  data() {
    return {
      activeName: "0",
      Tabs: [
        { title: "基础信息" },
        { title: "套餐组合" },
        { title: "使用须知" },
      ],
      loading: false,
      loading2: false,
      rowId: "",
      ruleForm: {
        name: "",
        oprice: "",
        price: "",
        stock: "",
        time: "",
        status: 1,
      },
      imageUrl: "",
      bannerImg: "", //轮播图
      fileList: [],
      fileListId: [],
      fileListArr: [],
      rules: {
        name: [{ required: true, message: "请输入套餐名", trigger: "blur" }],
        oprice: [{ required: true, message: "请输入原价", trigger: "blur" }],
        price: [{ required: true, message: "请输入现价", trigger: "blur" }],
        stock: [{ required: true, message: "请输入库存", trigger: "blur" }],
      },
      groupArr: [
        {
          list: [{}],
        },
      ],
      use_know: [{}],
      dialogVisible: false,
    };
  },
  methods: {
    //新增套餐
    async createCombo() {
      const { msg, err } = await createCombo({
        name: this.ruleForm.name,
        thumb: this.imageUrl,
        images: this.fileListArr.join(","), //轮播图
        oprice: this.ruleForm.oprice,
        price: this.ruleForm.price,
        use_range: this.ruleForm.time,
        stock: this.ruleForm.stock,
        status: this.ruleForm.status,
        combos: this.groupArr,
        tips: this.use_know,
      });
      if (err === 0) {
        this.$message({
          showClose: true,
          message: "操作成功!",
          type: "success",
        });
        this.$emit("handleClose");
      } else {
        this.$message({
          showClose: true,
          message: msg,
          type: "error",
        });
      }
    },
    //编辑套餐
    async editCombo() {
      const { err, msg } = await editCombo({
        id: this.rowData.id,
        name: this.ruleForm.name,
        thumb: this.imageUrl,
        images: this.fileListArr.join(","), //轮播图
        oprice: this.ruleForm.oprice,
        price: this.ruleForm.price,
        use_range: this.ruleForm.time,
        stock: this.ruleForm.stock,
        status: this.ruleForm.status,

        combos: this.groupArr,
        tips: this.use_know,
      });
      if (err === 0) {
        this.$message({
          showClose: true,
          message: "操作成功!",
          type: "success",
        });
        this.$emit("handleClose");
      } else {
        this.$message({
          showClose: true,
          message: msg,
          type: "error",
        });
      }
    },
    //详情
    async comboDetail() {
      const { data, err } = await comboDetail({
        cm_id: this.rowData.id,
      });
      if (err === 0) {
        //编辑
        this.ruleForm.name = data.name;
        this.imageUrl = data.thumb;
        data.images.forEach((item) => {
          item.url = item.src;
        });
        this.fileList = data.images; //轮播图
        this.ruleForm.oprice = data.oprice;
        this.ruleForm.price = data.price;
        this.ruleForm.stock = data.stock;
        this.ruleForm.time = data.use_range;
        this.ruleForm.status = data.status;
        this.groupArr = data.combos; //套餐组合
        this.use_know = data.tips; //使用须知
        console.log(this.fileList);
      }
    },
    //上一步
    handleBack() {
      if (this.activeName === "1") {
        this.activeName = "0";
      } else if (this.activeName === "2") {
        this.activeName = "1";
      }
    },
    //下一步
    handleNext() {
      if (this.activeName === "0") {
        this.activeName = "1";
      } else if (this.activeName === "1") {
        this.activeName = "2";
      }
    },
    //添加组合
    handleAddGroup() {
      this.groupArr.push({ list: [{}] });
    },
    //删除组合
    handleDeleteGroup(index) {
      this.groupArr.splice(index, 1);
    },
    //添加组合song
    handleAddGroup_sub(index) {
      this.groupArr[index].list.push({});
    },
    //删除组合song
    handleDeleteGroup_sub(index, i) {
      this.groupArr[index].list.splice(i, 1);
    },
    //新增使用须知
    handleAddKnow() {
      this.use_know.push({});
    },
    //删除使用须知
    handleDelKnow(index) {
      this.use_know.splice(index, 1);
    },
    //商品首图
    upLoadServe(file) {
      this.loading = true;
      upImg.upimg(
        (data) => {
          this.imageUrl = data.data.url;
          this.loading = false;
        },
        1,
        file
      );
    },
    //轮播图
    //上传图片轮播图
    upLoadServe1(file) {
      this.loading2 = true;
      upImg.upimg(
        (data) => {
          //state判断是首图还是轮播图
          this.fileListId.push({ id: data.data.url, name: file.file.name });
          this.fileListArr = this.fileListId.map((item) => {
            return item.id;
          });
          this.loading2 = false;
          console.log(this.fileListArr);
        },
        1,
        file
      );
    },
    //商品轮播图
    handlePictureCardPreview(file) {
      this.bannerImg = file.url;
      this.dialogVisible = true;
    },
    //删除商品图
    handleRemove(file, fileList) {
      file;
      fileList;
      //原来的图片
      this.fileList = fileList;
      //添加的图片
      this.fileListId.forEach((item, index) => {
        if (file.name === item.name) {
          this.fileListId.splice(index, 1);
        }
      });
      this.fileListArr = this.fileListId.map((item) => {
        return item.id;
      });
    },
    handleSubmit() {
      if (this.fileList) {
        //如果有旧图片
        this.fileList.forEach((item) => {
          this.fileListArr.push(item.at_id);
        });
      }
      if (this.rowData.id) {
        //编辑
        this.editCombo();
      } else {
        this.createCombo();
      }
    },
  },
  created() {
    if (this.rowData.id) {
      this.comboDetail();
    }
  },
};
</script>

<style lang="scss" scoped>
.purchase {
  padding-left: 40px;
  box-sizing: border-box;
  .purchase_con {
    margin-top: 20px;
    display: flex;
    align-items: center;
    .l {
      width: 65%;
      .flex {
        width: 400px;
        display: flex;
        align-items: center;
        div {
          flex-shrink: 0;
          margin-bottom: 20px;
        }
      }
    }
    i {
      font-size: 30px;
    }
  }
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.pb20 {
  padding-bottom: 20px;
  box-sizing: border-box;
}
.avatar-uploader {
  width: 82px;
  height: 82px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.avatar-uploader {
  width: 82px;
  height: 82px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
/deep/.el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
/deep/.el-upload-list__item {
  width: 80px !important;
  height: 80px !important;
  border: 0 !important;
}
.taocan {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 13px;
  .clo {
    width: 20%;
    display: flex;
    justify-content: center;
    .el-input {
      width: 90%;
    }
  }
  .cz {
    font-size: 26px;
    margin: 0 20px;
  }
}
.next {
  padding-top: 20px;
  box-sizing: border-box;
}
.taocan_group {
  display: flex;
  align-items: center;
  font-size: 13px;
  margin-bottom: 20px;
  .del {
    font-size: 26px;
    margin-left: 20px;
  }
  .el-input {
    width: 300px;
    margin-right: 20px;
  }
  .ti {
    width: 80px;
  }
}
</style>
